//比例
const scale = {
	width: '1',
	height: '1',
}

//默认元素样式
const baseContainerStyle = {
	width: '1920px',
	height: '1080px',
	position: 'absolute',
	top: '50%',
	left: '50%',
	transform: 'translate(-50%, -50%)',
	transformOrigin: 'left top',
}

function useDrawToDom (appDomId,options = {baseWidth:1920,baseHeight:1080,baseProportion: null}){
	let drawTiming = null

	//设计稿尺寸 (px)
	const baseWidth = options.baseWidth
	const baseHeight = options.baseHeight

	// * 需保持的比例（默认1.77778）
	const baseProportion = options.baseProportion || parseFloat((baseWidth / baseHeight).toFixed(5))

	const calcRate = () =>{
		const appDom = document.getElementById(appDomId)
		if(!appDom) return
		Object.assign(appDom.style,baseContainerStyle)

		// 当前宽高比
		const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
		if (appDom) {
			if (currentRate > baseProportion) {
				// 表示更宽
				scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
				scale.height = (window.innerHeight / baseHeight).toFixed(5)
				appDom.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
			} else {
				// 表示更高
				scale.height = (window.innerWidth / baseProportion / baseHeight).toFixed(5)
				scale.width = (window.innerWidth / baseWidth).toFixed(5)
				appDom.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
			}
		}

	}
	const resize = () => {
		clearTimeout(drawTiming)
		drawTiming = null
		drawTiming = setTimeout(calcRate, 200)
	}
	window.onload = function (){
		calcRate()
		window.addEventListener('resize', resize, false)
	}
	window.onbeforeunload= function (){
		window.removeEventListener('resize', resize, false)
	}
}

//初始化useDraw函数时需要传入组件实例(响应式)
function useDrawToVue3(appRef, options = { baseWidth: 1920, baseHeight: 1080,baseProportion:null }) {
	let drawTiming = null

	// * 设计稿尺寸（px）
	const baseWidth = options.baseWidth
	const baseHeight = options.baseHeight

	// * 需保持的比例（默认1.77778）
	const baseProportion = options.baseProportion || parseFloat((baseWidth / baseHeight).toFixed(5))

	const calcRate = () => {
		if (!appRef.value) return
		Object.assign(appRef.value.style,baseContainerStyle)
		// 当前宽高比
		const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
		if (appRef.value) {
			if (currentRate > baseProportion) {
				// 表示更宽
				scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
				scale.height = (window.innerHeight / baseHeight).toFixed(5)
				appRef.value.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
			} else {
				// 表示更高
				scale.height = (window.innerWidth / baseProportion / baseHeight).toFixed(5)
				scale.width = (window.innerWidth / baseWidth).toFixed(5)
				appRef.value.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
			}
		}
	}
	const resize = () => {
		clearTimeout(drawTiming)
		drawTiming = null
		drawTiming = setTimeout(calcRate, 200)
	}

	return {
		calcRate,
		resize,
	}
}

function useDrawToVue2(appRefName, options = { baseWidth: 1920, baseHeight: 1080,baseProportion:null }) {
	// * 设计稿尺寸（px）
	const baseWidth = options.baseWidth
	const baseHeight = options.baseHeight

	// * 需保持的比例（默认1.77778）
	const baseProportion = options.baseProportion || parseFloat((baseWidth / baseHeight).toFixed(5))
	return {
		data() {
			return {
				// * 定时函数
				drawTiming: null,
			}
		},
		mounted() {
			this.calcRate()
			window.addEventListener('resize', this.resize, false)
		},
		beforeDestroy() {
			window.removeEventListener('resize', this.resize, false)
		},
		methods: {
			calcRate() {
				const appRef = this.$refs[appRefName]
				if (!appRef) return
				Object.assign(appRef.style,baseContainerStyle)
				// 当前宽高比
				const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
				if (appRef) {
					if (currentRate > baseProportion) {
						// 表示更宽
						scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
						scale.height = (window.innerHeight / baseHeight).toFixed(5)
						appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
					} else {
						// 表示更高
						scale.height = (window.innerWidth / baseProportion / baseHeight).toFixed(5)
						scale.width = (window.innerWidth / baseWidth).toFixed(5)
						appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
					}
				}
			},
			resize() {
				clearTimeout(this.drawTiming)
				this.drawTiming = setTimeout(this.calcRate, 200)
			},
		},
	}
}
export {
	useDrawToDom,
	useDrawToVue2,
	useDrawToVue3
}
